<template>
    <a-form @finish="handleFinish" :model="form" ref="formRef" name="basic" :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="项目名称" name="proName" :rules="[{ required: true }]">
                    <a-input-search v-model:value="form.proName" disabled style="width: 100%"
                        placeholder="清选择项目" @click="onSearch" @search="onSearch" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="任务名称" name="name">
                    <a-input v-model:value="form.name" style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="上级任务" name="pid">
                    <a-tree-select v-model:value="form.pid" style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择分类" allow-clear
                        tree-default-expand-all :tree-data="treeData" :defaultExpandAllRows="true" :field-names="{
        children: 'children',
        label: 'name',
        value: 'id'
    }" selectable="false" tree-line>
                    </a-tree-select>
                </a-form-item>
            </a-col>
        </a-row>

        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="负责人" name="directorName">
                    <a-input v-model:value="form.directorName" style="width: 100%" placeholder=""
                        @click="showUserSelect" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="项目工期" name="duration">
                    <a-input v-model:value="form.duration" style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="计划时间" name="planTime" :rules="[{ required: true }]">
                    <a-range-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="form.planTime"
                        style="width: 100%;" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="实际时间" name="actualTime" :rules="[{ required: true }]">
                    <a-range-picker valueFormat="YYYY-MM-DD hh:mm:ss" v-model:value="form.actualTime"
                        style="width: 100%;" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="进度" name="process" :rules="[{ required: true }]">
                    <a-input-number :precision="2" :min="0"  v-model:value="form.process" style="width: 100%" suffix="%"
                        placeholder="" />
                </a-form-item>
            </a-col>

        </a-row>
 

        <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" html-type="submit">保存</a-button>
                <a-button style="margin-left: 10px" @click="onClose">取消</a-button>
            </a-form-item> -->
    </a-form>
    <projectSelection ref="proSelect" @onClose="prSelectOk" />
    <userSelectorPlus ref="userSelectorRef" :radioModel="false" @OnClose="userSelectorOk"></userSelectorPlus>
</template>
<script setup>

import projectSelection from '@/components/pm/projectSelection.vue'
import userSelectorPlus from '@/components/Selector/userSelectorPlusExtend.vue'
import api from '@/api/pm/protask/index'
const formRef = ref()
const treeData = ref([])

const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    disabled: {
        type: Boolean,
        default: () => false
    }
})
const userSelectorRef = ref()
const showUserSelect = () => {
    userSelectorRef.value.show(form.value.director?.split(","))
}
const userSelectorOk = (data) => {
    console.log("userSelectorOk", data)
    form.value.directorName = "";
    form.value.director = "";
    form.value.directorName = data.map(x => x.name).join(",")
    form.value.director = data.map(x => x.id).join(",")
}

const form = ref({
});

const handleFinish = (values) => {
    form.value.actualStartTime = form.value.actualTime[0]
    form.value.actualEndTime = form.value.actualTime[1]
    form.value.planStartTime = form.value.planTime[0]
    form.value.planEndTime = form.value.planTime[1]
    if (!form.value.id) {
        api.add(values).then(() => {
            onClose(true);
        })
    } else {
        values.id = form.value.id;
        api.edit(values).then(() => {
            onClose(true);
        })
    }
};
const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    console.log("prSelectOk", selectedRowKeys, selectRecords)
    form.value.proId = selectRecords[0].id;
    form.value.proName = selectRecords[0].name;
    form.value.proCode = selectRecords[0].code;
    form.value.current = 1
    form.value.size = 10

    api.page(form.value).then((res) => {
        treeData.value = [
            {
                "id": "0",
                "parentId": "0",
                "weight": 1,
                "name": "顶级",
                "children": res
            }
        ]
    })

}


const emits = defineEmits(['onClose'])
const onClose = (flag) => {
    emits('onClose', flag)
};
const show = (record) => {
    if (record) {
        form.value = { ...record }
        form.value.actualTime = [form.value.actualStartTime, form.value.actualEndTime]
        form.value.planTime = [form.value.planStartTime, form.value.planEndTime]

        form.value.directorName = record.userList?.map(x => x.name).join(",")
        form.value.director = record.userList?.map(x => x.id).join(",")

        api.page({
            proId:form.value.proId,

        }).then((res) => {
        treeData.value = [
            {
                "id": "0",
                "parentId": "0",
                "weight": 1,
                "name": "顶级",
                "children": res
            }
        ]
    })
    } else {
        form.value = {
        }
    }
}

watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            form.value = { ...newVal }
        }
    },
    { deep: true, immediate: true }
)
// 重置
const resetForm = () => {
    formRef.value.resetFields()
}

const getData = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
            resolve(form.value)
        }).catch((err) => {
            reject(err)
        });
    })
}
const submit = () => {
    formRef.value.validate().then(() => {
        handleFinish(form.value)
    })

}
defineExpose({
    submit,
    getData,
    resetForm,
    show
})
</script>